<template>
    <div>
      <div class="top" align="center" style="border: 1px solid;height: 150px;">
        <div style="margin-top:50px">
          <input style="width: 300px;height: 40px" />
          <button style="height: 40px;width: 70px;margin-left: -10px;">搜索</button>
        </div>
      </div>
      <div class="courseInfo">
        <div class="searchCourse" style="float: left">
          <ul>
            <li  style="margin-top: 20px;overflow: hidden" v-for="course in courseList">
              <div style="height: 200px;overflow: hidden">
                <a :href="'http://localhost:8080/#/courseDetail/'+course.id"><img :src="course.cover" width="250px"></a>
              </div>
              <div style="height: 80px;">
                <span style="font-size: 20px">{{course.title}}</span>
                <p><a :href="'http://localhost:8080/#/courseDetail/'+course.id">{{course.viewCount}}</a></p>
                <p style="width: 400px;overflow: hidden;height: 100px;" v-html="course.description"></p>
              </div>

            </li>

          </ul>

        </div>
        <div class="tuijianCourse"  style="float: right">
          <h3>推荐课程</h3>
          <ul style="margin-right: 100px" v-for="recommand in recommandList">
            <li  style="margin-top: 20px;">
              <div  style="overflow: hidden">
                <a :href="'http://localhost:8080/#/courseDetail/'+recommand.id"><img :src="recommand.cover" width="150px"></a>
              </div>
              <div style="    height: 83px;overflow: hidden;">
                <a :href="'http://localhost:8080/#/courseDetail/'+recommand.id"><span style="font-size: 15px">{{recommand.title}}</span></a>
                <p style="color: green;margin-top: 30px">免费</p>
              </div>

            </li>

          </ul>

        </div>

      </div>
    </div>
</template>

<script>
  import course from '@/api/course'
    export default {
        name: "courseSearch",
      data(){
          return{
            title:this.$route.params.title,
            courseList:[],
            subjectId: '',
            recommandList : []
          }
      },
      created() {
        this.searchTitle()
      },
      methods:{
          //首页查询
          searchTitle(){
            course.searchMain(this.title)
              .then(response=>{
                this.courseList = response.data.data.list
                this.subjectId = response.data.data.subjectId
                course.recommand(this.subjectId).then(response=>{
                  this.recommandList = response.data.data.list
                })
              })
          }
      }


    }
</script>

<style scoped>
  li{list-style: none}
  .courseInfo{
    height: 1000px;
  }
  .searchCourse ul li div{
    display: inline-block;
  }
  .tuijianCourse ul li div{
    display: inline-block;
  }
</style>
